<script lang="ts" setup>
import axios from 'axios'
import { useLevelStore } from "@/stores/level"
import { computed, onMounted, ref } from 'vue'
// import type { ComponentSize } from 'element-plus'
import { examPage, type ExamType } from "@/api/exampage"
import { useRouter } from 'vue-router';
//创建路由实例
const router = useRouter()

//表单参数
const formInline = ref({
  level: "",
  subjectId: '',
  id: "",
  pageIndex: 1,
  pageSize: 10,
})
// const subject = ref([])
//总页数
const total = ref(0)
//pinia的数据
const levelstore = useLevelStore()
//表单数据
const tableData = ref<ExamType[]>([])
console.log(tableData, 'tabledata');
//学科与年级数组
const arr = ref<any>([])

//获取列表接口
function getpageList() {
  examPage(formInline.value).then(res => {
    console.log(res, 'exampage');
    if (res.code === 1) {
      tableData.value = (res.response?.list as ExamType[])
      total.value = (res.response?.total as number)
    }
  })
}
getpageList()

function getsubjectList() {
  axios({
    url: "/api/api/admin/education/subject/list",
    method: "post",
  }).then(res => {
    console.log(res.data, 'subject')
    if (res.data.message == "成功") {
      arr.value = res.data.response
      // const subject = `${res.data.response[0].name}(${res.data.response[0].levelName})`
      // console.log(subject);
    }
  })

}
getsubjectList()


//每页大小变化
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  formInline.value.pageSize = val;
  getpageList()
}

//当前页修改
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  formInline.value.pageIndex = val;
  getpageList()
}
const id = ref('')
const subject = ref('')
const syncedId = computed({
  get() {
    return id.value
  },
  set(newValue) {
    id.value = newValue
    formInline.value.id = newValue
  }
})
const onSubmit = () => {
    console.log('submit');
    console.log(formInline.value);
    getpageList()
}
// id.value=formInline.id
function handleAdd() {
    router.push("/paper/add")
}
function handleEdit(row: ExamType) {
  router.push(`/paper/edit?id=${row.id}`)
}
function handleDelete(row: ExamType) {
  if (confirm('确定要删除该试卷吗？')) {
    axios.delete(`/api/admin/exam/paper/delete/${row.id}`)
      .then(res => {
        if (res.data && res.data.code === 1) {
          alert('删除成功')
          getpageList()
        } else {
          alert(res.data?.message || '删除失败')
        }
      })
      .catch(err => {
        alert(err.message || '删除失败')
      })
  }
}
// onMounted(() => {
//     getsubjectList()
// })
</script>
<template>
  <div>
    <div style="display: flex; " inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="题目id:">
        <el-input clearable v-model="syncedId" />
      </el-form-item>
      <el-form-item label="年级:" style="width: 15%; margin-left: 2%;">
        <el-select clearable v-model="formInline.level" placeholder="年级" size="large">
          <el-option v-for="item in levelstore.list" :key="item.value" :label="item.name" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="学科: " style="width: 15%; margin-left: 2%;">
        <el-select clearable  v-model="subject" placeholder="请选择" size="large">
          <el-option v-for="item in arr" :key="item.id" :label="item.name  + '('+item.levelName+')'" :value="item.name  + '('+item.levelName+')'" />
        </el-select>
      </el-form-item>


      <el-button type="primary" style=" margin-left: 2%;" size="large" @click="onSubmit">查询</el-button>
      <el-button type="primary" style=" margin-left: 2%;" size="large" @click="handleAdd">添加</el-button>
    </div>
    <div style="padding: 20px;">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="id" width="180" />
        <el-table-column label="学科" width="180">
          <template #default="scope">
            <span v-for="item in arr" :key="id">
              <span v-if="scope.row.subjectId == item.id">{{ item.name }}({{ item.levelName }})</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" width="180" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column fixed="right" label="操作" width="180">
          <template #default="scope">
            <el-button @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bt">
      <div class="demo-pagination-block">
        <el-pagination v-model:current-page="formInline.pageIndex" v-model:page-size="formInline.pageSize"
          :page-sizes="[5, 10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>


<style>
.bt {
  margin-left: 0;
  display: flex;
  justify-content: flex-start;
}

.btr {
  width: 90px;
  display: flex;
  justify-content: space-between;
}
</style>